import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import Col from "antd/es/grid/col";
import Row from "antd/es/grid/row";
import * as React from "react";

import { RouteComponentProps } from "react-router";
import { getDoctorOne } from "../../axios/Request";
import { DoctorData } from "../../type/DoctorData";
import DoctorCard from "./DoctorCard";
import RecommendUser from "./RecommendUser";
import SchedulingInformation from "./SchedulingInformation";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    chooseDay: {}
  });

interface Iprops extends WithStyles<typeof styles>, RouteComponentProps<any> {}

interface Istates {
  doctorData: DoctorData;
  recommendDoctor: DoctorData[];
}
/**
 * 医生详情组件
 * @author sunshixiong
 */
class DoctorInfo extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      doctorData: {},
      recommendDoctor: []
    };
  }
  public componentWillReceiveProps() {
    this.getData();
  }
  public componentWillMount() {
    this.getData();
  }
  public getData = () => {
    getDoctorOne({ id: this.props.match.params.id }).then(value => {
      this.setState({
        doctorData: value.data.content[0]
      });
      getDoctorOne({
        departId: value.data.content[0].departId
      }).then(value1 => {
        if (value1.data.content.length > 3) {
          this.setState({
            recommendDoctor: value1.data.content.slice(0, 3)
          });
        } else {
          this.setState({
            recommendDoctor: value1.data.content
          });
        }
      });
    });
  };
  public render() {
    const { classes } = this.props;
    return (
      <div>
        <DoctorCard data={this.state.doctorData} />
        <Row>
          <Col span={16} className={classes.chooseDay}>
            <SchedulingInformation doctorId={this.props.match.params.id} />
          </Col>
          <Col span={8}>
            <RecommendUser
              title={"同科室医生推荐"}
              data={this.state.recommendDoctor}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default withStyles(styles)(DoctorInfo);
